<template>
  <div class="toolbar">
    <Tabs
      :tabs="currentTabs"
      :value="toolbarState"
      class="tab_sty"
      @update:value="key => setToolbarState(key as ToolbarStates)"
    />
    <div class="content">
      <!-- 条件性地渲染 LayoutPool 并添加事件监听 -->

      <!-- 其他组件将根据 currentPanelComponent 渲染 -->
      <component :is="currentPanelComponent"></component>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed, watch } from 'vue'
import { storeToRefs } from 'pinia'
import { useMainStore, useProposalStore } from '@/store'
import { ToolbarStates } from '@/types/toolbar'
import { useI18n } from 'vue-i18n'

import ElementStylePanel from './ElementStylePanel/index.vue'
import ElementPositionPanel from './ElementPositionPanel.vue'
import ElementAnimationPanel from './ElementAnimationPanel.vue'
import SlideDesignPanel from './SlideDesignPanel.vue'
import LayoutElements from './LayoutElements.vue'
import SystemFunction from './SystemFunction.vue'
import EquipmentList from './EquipmentList.vue'

import SlideAnimationPanel from './SlideAnimationPanel.vue'
import MultiPositionPanel from './MultiPositionPanel.vue'
import SymbolPanel from './SymbolPanel.vue'
import Tabs from '@/components/Tabs.vue'

interface ElementTabs {
  label: string;
  key: ToolbarStates;
}

const mainStore = useMainStore()
const proposalStore = useProposalStore()

const { activeElementIdList, handleElement, toolbarState } = storeToRefs(mainStore)
const { isProposalLayoutCreate, isProposalLayoutEdit, isProposalLayoutView } =
  storeToRefs(proposalStore)
const { t } = useI18n()

const elementTabs = computed<ElementTabs[]>(() => {
  if (handleElement.value?.type === 'text') {
    return [
      { label: t('text'), key: ToolbarStates.EL_STYLE },
      { label: t('symbol'), key: ToolbarStates.SYMBOL },
      { label: t('position.position'), key: ToolbarStates.EL_POSITION },
      { label: t('animation'), key: ToolbarStates.EL_ANIMATION },
    ]
  }
  return [
    { label: t('style'), key: ToolbarStates.EL_STYLE },
    { label: t('position.position'), key: ToolbarStates.EL_POSITION },
    { label: t('animation'), key: ToolbarStates.EL_ANIMATION },
  ]
})
const slideTabs = computed(() => [
  { label: t('design'), key: ToolbarStates.SLIDE_DESIGN, show: true },
  { label: t('slideAnimation'), key: ToolbarStates.SLIDE_ANIMATION, show: true },
  { label: t('animation'), key: ToolbarStates.EL_ANIMATION, show: true },
  {
    label: t('layoutElements'),
    key: ToolbarStates.LAYOUT_ELEMENTS,
    show: isProposalLayoutCreate.value || isProposalLayoutEdit.value,
  },
  // {
  //   label: t('systemFunction'),
  //   key: ToolbarStates.SYSTEM_FUNCTION,
  //   show: !isProposalLayoutCreate.value && !isProposalLayoutEdit.value && !isProposalLayoutView.value,
  // },
  // {
  //   label: t('equipmentList'),
  //   key: ToolbarStates.EQUIPMENT_LIST,
  //   show: !isProposalLayoutCreate.value && !isProposalLayoutEdit.value && !isProposalLayoutView.value,
  // },
])
const multiSelectTabs = [
  { label: t('style'), key: ToolbarStates.EL_STYLE },
  { label: t('position.position'), key: ToolbarStates.MULTI_POSITION },
]

const setToolbarState = (value: ToolbarStates) => {
  mainStore.setToolbarState(value)
}

const currentTabs = computed(() => {
  const _slideTabs = slideTabs.value
    .map((tab) => {
      if (tab.show) {
        return tab
      }
    })
    .filter(Boolean)

  if (!activeElementIdList.value.length) return _slideTabs
  else if (activeElementIdList.value.length > 1) return multiSelectTabs
  return elementTabs.value
})

watch(currentTabs, () => {
  const currentTabsValue: ToolbarStates[] = currentTabs.value.map((tab) => tab.key)
  if (!currentTabsValue.includes(toolbarState.value)) {
    mainStore.setToolbarState(currentTabsValue[0])
  }
})

const currentPanelComponent = computed(() => {
  const panelMap: any = {
    [ToolbarStates.EL_STYLE]: ElementStylePanel,
    [ToolbarStates.EL_POSITION]: ElementPositionPanel,
    [ToolbarStates.EL_ANIMATION]: ElementAnimationPanel,
    [ToolbarStates.SLIDE_DESIGN]: SlideDesignPanel,
    [ToolbarStates.SLIDE_ANIMATION]: SlideAnimationPanel,
    [ToolbarStates.MULTI_POSITION]: MultiPositionPanel,
    [ToolbarStates.SYMBOL]: SymbolPanel,
    [ToolbarStates.LAYOUT_ELEMENTS]: LayoutElements,
    [ToolbarStates.SYSTEM_FUNCTION]: SystemFunction,
    [ToolbarStates.EQUIPMENT_LIST]: EquipmentList,
    // [ToolbarStates.AI]: AI,
  }
  return panelMap[toolbarState.value] || null
})
</script>

<style lang="scss" scoped>
.toolbar {
  border-radius: 8px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
}

.content {
  height: 100%;
  padding: 12px;
  font-size: 13px;

  @include overflow-overlay();
}
</style>
<style lang="scss">
.tab_sty {
  color: #999;
  height: 46px;
  justify-content: space-around;
  .tab {
    border-bottom: none !important;
    font-size: 14px;
  }
  .active {
    border-bottom: none !important;
    color: #333;
    font-weight: bold;
  }
}
</style>
